<template>
  <a
    :class="linkCls"
    :href="disabled || !href ? undefined : href"
    :target="disabled || !href ? undefined : target"
    @click="handleClick"
  >
    <span v-if="$slots.default" class="v-link__inner">
      <slot />
    </span>
  </a>
</template>

<script lang="ts">
import Vue from 'vue'
import type { PropValidator } from 'vue/types/options'

type ILinkType =
  | 'primary'
  | 'success'
  | 'warning'
  | 'info'
  | 'danger'
  | 'default'
type ILinkTarget = '_blank' | '_parent' | '_self' | '_top'

export default Vue.extend({
  name: 'VLink',
  props: {
    type: {
      type: String,
      default: 'default'
    } as PropValidator<ILinkType>,
    underline: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    href: {
      type: String,
      default: ''
    },
    target: {
      type: String,
      default: '_self'
    } as PropValidator<ILinkTarget>
  },
  computed: {
    linkCls() {
      return [
        'v-link',
        {
          [`v-link--${this.type}`]: this.type,
          ['is-disabled']: this.disabled,
          ['is-underline']: this.underline
        }
      ]
    }
  },
  methods: {
    handleClick(event: MouseEvent) {
      if (!this.disabled) this.$emit('click', event)
    }
  }
})
</script>

<style src="./style.css"></style>
